/**
 * 一键自适应的工具
 */

let currRenderDom = null;
let currelRectification = '';
let currelRectificationLevel = '';
let resizeListener = null;
let timer = null;
let currScale = 1;
let isAutofitRunnig = false;
let isElRectification = false;

const autofit = {
	init(options = {}) {
		const designWidth = options.designWidth || 1920;
		const designHeight = options.designHeight || 929;
		const renderDom = options.renderDom || '#app';
		const resize = options.resize || true;
		const ignore = options.ignore || [];
		const transition = options.transition || 0.6;
		const delay = options.delay || 1000;
		currRenderDom = renderDom;
		const dom = document.querySelector(renderDom);
		if (!dom) {
			console.error(`autofit: '${renderDom}' is not exist`);
			return;
		}
		const ignoreStyle = document.createElement('style');
		ignoreStyle.lang = 'text/css';
		ignoreStyle.id = 'ignoreStyle';
		dom.appendChild(ignoreStyle);

		dom.style.height = `${designHeight}px`;
		dom.style.width = `${designWidth}px`;
		dom.style.transformOrigin = `0 0`;

		keepFit(designWidth, designHeight, dom, ignore);

		resizeListener = () => {
			if (timer) clearTimeout(timer);
			timer = setTimeout(() => {
				keepFit(designWidth, designHeight, dom, ignore);
				isElRectification && elRectification(currelRectification, currelRectificationLevel);
			}, delay);
		};
		resize && window.addEventListener('resize', resizeListener);
		isAutofitRunnig = true;
		setTimeout(() => {
			dom.style.transition = `${transition}s`;
		});
	},
	off(renderDom = '#app') {
		try {
			isElRectification = false;
			window.removeEventListener('resize', resizeListener);
			document.querySelector('#autofit-style').remove();
			document.querySelector(currRenderDom ? currRenderDom : renderDom).style = '';
			for (const item of document.querySelectorAll(currelRectification)) {
				item.style.width = ``;
				item.style.height = ``;
				item.style.transform = ``;
			}
		} catch (error) {
			console.error(`autofit: Failed to remove normally`, error);
			isAutofitRunnig = false;
		}
		isAutofitRunnig &&
			console.log(`%c` + `autofit.js` + ` is off`, `font-weight: bold;color: #707070; background: #c9c9c9; padding: 8px 12px; border-radius: 4px;`);
	}
};
function elRectification(el, level = 1) {
	if (!isAutofitRunnig) {
		console.error('autofit.js：autofit has not been initialized yet');
	}
	!el && console.error(`autofit.js：bad selector: ${el}`);
	currelRectification = el;
	currelRectificationLevel = level;
	const currEl = document.querySelectorAll(el);
	if (currEl.length == 0) {
		console.error('autofit.js：elRectification found no element');
		return;
	}
	for (const item of currEl) {
		if (!isElRectification) {
			item.originalWidth = item.clientWidth;
			item.originalHeight = item.clientHeight;
		}
		const rectification = currScale == 1 ? 1 : currScale * level;
		item.style.width = `${item.originalWidth * rectification}px`;
		item.style.height = `${item.originalHeight * rectification}px`;
		item.style.transform = `scale(${1 / currScale})`;
		item.style.transformOrigin = `0 0`;
	}
	isElRectification = true;
}
function keepFit(designWidth, designHeight, dom, ignore) {
	const clientHeight = document.documentElement.clientHeight;
	const clientWidth = document.documentElement.clientWidth;
	currScale = clientWidth / clientHeight < designWidth / designHeight ? clientWidth / designWidth : clientHeight / designHeight;

	dom.style.height = `${clientHeight / currScale}px`;
	dom.style.width = `${clientWidth / currScale}px`;
	dom.style.transform = `scale(${currScale})`;

	for (const item of ignore) {
		const realScale = item.scale ? item.scale : 1 / currScale;
		const realFontSize = realScale != currScale ? item.fontSize : 'autofit';
		const realWidth = realScale != currScale ? item.width : 'autofit';
		const realHeight = realScale != currScale ? item.height : 'autofit';
		document.querySelector('#ignoreStyle').innerHTML = `${item.dom}{ 
      transform: scale(${realScale})!important;
      transform-origin: 0 0;
      width: ${realWidth}px!important;
      height: ${realHeight}px!important;
    }`;
		document.querySelector('#ignoreStyle').innerHTML +=
			`${item.dom} div ,${item.dom} span,${item.dom} a,${item.dom} *{font-size: ${realFontSize}px;}`;
	}
}
export { elRectification };
export default autofit;

import { useWindowSize } from '@vueuse/core';

// 监听屏幕宽高逻辑,大屏页面响应式
const { width, height } = useWindowSize(),
	BasicsWidth = 1920,
	BasicsHeight = 937;
export const style = computed(() => {
	const scale = width.value / height.value < BasicsWidth / BasicsHeight ? width.value / BasicsWidth : height.value / BasicsHeight;
	return {
		transformOrigin: '0 0',
		top: '50%',
		left: '50%',
		width: `${width.value / scale}px`,
		height: `${height.value / scale}px`,
		transform: `scaleX( ${scale}) scaleY(${scale}) translateX(-50%) translateY(-50%)`
	};
});
